
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="renderer" content="webkit">
    <title>支付宝收银台</title>


    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        body{background:#f2f2f4;}
        body,html{width:100%;height:100%;}
        *,:after,:before{box-sizing:border-box;}
        *{margin:0;padding:0;}
        img{max-width:100%;}
        #header{height:60px;border-bottom:2px solid #eee;background-color:#fff;text-align:center;line-height:60px;}
        #header h1{font-size:20px;}
        #main{overflow:hidden;margin:0 auto;padding:20px;padding-top:80px;width:992px;max-width:100%;}
        #main .left{float:left;width:40%;box-shadow:0 0 60px #b5f1ff;}
        .left p{margin:10px auto;}
        .make{padding-top:15px;border-radius:10px;background-color:#fff;box-shadow:0 3px 3px 0 rgba(0,0,0,.05);color:#666;text-align:center;transition:all .2s linear;}
        .make .qrcode{margin:auto;}
        .make .money{margin-bottom:0;color:#f44336;font-weight:600;font-size:18px;}
        .info{padding:15px;width:100%;border-radius:0 0 10px 10px;background:#32343d;color:#f2f2f2;text-align:center;font-size:14px;}
        #main .right{float:right;padding-top:25px;width:60%;color:#ccc;text-align:center;}
        @media (max-width:768px){
            #main{padding-top:30px;}
            #main .left{width:100%;}
            #main .right{display:none;}
        }
    </style>





    <link rel="stylesheet" type="text/css" th:href="@{/css/s.css}">

    <link th:href="@{/css/wechat_pay.css?v=2}" rel="stylesheet" media="screen">
</head>
<body>






<div id="main">
    <div class="left">
        <div class="make">
            <p><img th:src="@{/img/alipay-logo.png}" alt="" style="height:30px;"></p>

            <p style="font-weight:bold; color:green">[[${orderCode}]]</p>
            <p class="money" id="price" style="font-weight:bold; color:green">￥[[${amount}]]</p>

            <div align="center">
                <h2>距离该订单过期还有</h2>
                <div class="time-item">
                    <strong id="hour_show"><s id="h"></s>0时</strong>
                    <strong id="minute_show"><s></s>0分</strong>
                    <strong id="second_show"><s></s>0秒</strong>
                </div>

            </div>
            <center>
                <a id="alipayh5url_1"></a>
                <a id="alipayh5url_2"></a>
            </center>
            <div align="center">

                <div class="shadow"><div align="center">
                    <div id="qrcode">
                        <img id="image"  style="display: block;">
                    </div>
                </div>
                </div>

                <p style="color: red;font-size: 14px;word-wrap: break-word;">如果按钮无法发起支付，请先截屏二维码保存到相册，然后用扫一扫上传相册的二维码进行支付</p>

                <p style="color: #337ab7;font-size: 16px;margin: 15px 0 30px 0;"><a th:href="${sdkStr}" target="_blank">跳转支付</a></p>

            </div>
        </div>
    </div>
    <div class="right">
        <img th:src="@{/img/alipay-sys.png}" alt="">


    </div>
</div>

</br>
</dl>
<a href="javascript:void(0)" class="arrow"><i class="ico-arrow"></i></a>
</div>
<div class="tip">
    <span class="dec dec-left"></span>
    <span class="dec dec-right"></span>
    <div class="ico-scan"></div>
    <div class="tip-text">

    </div>
</div>
<div class="tip-text">
</div>
</div>
<div class="foot">
    <div class="inner">

    </div>
</div>
</div>
<script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//lib.baomitu.com/layer/3.1.1/layer.min.js"></script>
<script src="//lib.baomitu.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="//lib.baomitu.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript" th:src="@{/js/qrcode.js}"></script>
<script>
    var intDiff = parseInt(5*60);//倒计时总秒数量
    var url = '[[${payUrl}]]';
    var andurl = '[[${androidPayUrl}]]';
    var key = "&amp;";
    var newUrl = url.replace(new RegExp(key, 'g'), "&");
    var newadUrl = andurl.replace(new RegExp(key, 'g'), "&");

    new QRCode(document.getElementById("qrcode"), {
        text: newadUrl,
        width: 250,
        height: 250,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: 3
    });
    function timer(intDiff){
        window.setInterval(function(){
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值
            if(intDiff > 0){
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute == '00' && second == '00') document.getElementById('qrcode').innerHTML='<br/><br/><br/><br/><br/><h2>二维码超时 请重新发起交易</h2><br/><br/><br/>';
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#day_show').html(day+"天");
            $('#hour_show').html('<s id="h"></s>'+hour+'时');
            $('#minute_show').html('<s></s>'+minute+'分');
            $('#second_show').html('<s></s>'+second+'秒');
            intDiff--;
        }, 1000);
    }
    var isMobile = function (){
        var ua = navigator.userAgent;
        var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
            isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
            isAndroid = ua.match(/(Android)\s+([\d.]+)/);
        return isIphone || isAndroid;
    }
    window.onload = function(){
        timer(intDiff);
        if(isMobile()){
            $('.mobile-btn').show();
            $('.mobile-tip').show();
        }
    }
</script>
</body>
</html>